CSS Motion Path-koordinatsystem: Definere stier for dynamiske animasjoner

CSS Motion Path er en kraftig funksjon som lar deg animere elementer langs en definert sti. Det åpner en verden av kreative muligheter for webanimasjon, og lar deg bevege elementer på måter som tidligere var vanskelige eller umulige. Denne guiden dykker ned i detaljene i CSS Motion Path-koordinatsystemet, med fokus på hvordan man definerer disse stiene og utnytter potensialet deres for dynamiske webopplevelser.

Forstå kjernekonseptene

I kjernen dreier CSS Motion Path seg om konseptet med en sti. Denne stien fungerer som banen et element vil bevege seg langs. Dette oppnås ved å bruke egenskapen offset-path, som spesifiserer stien. Animasjonen benytter deretter egenskaper som offset-distance, offset-rotate og offset-anchor for å kontrollere elementets posisjon, rotasjon og ankerpunkt langs den stien. Stien kan defineres ved hjelp av ulike metoder, inkludert SVG-stier, former og til og med grunnleggende geometriske primitiver.

Definere stier: Grunnlaget for bevegelse

Nøyaktigheten og kreativiteten i animasjonene dine avhenger av presisjonen du definerer stiene med. Egenskapen offset-path er ditt primære verktøy for dette, og verdien aksepterer forskjellige stidefinisjoner.

1. Bruke SVG-stier

SVG (Scalable Vector Graphics) gir den mest fleksible og kraftige metoden for å definere stier. SVG-stier bruker en dedikert syntaks for å beskrive linjer, kurver og komplekse former, noe som gir utrolig detaljrikdom og kontroll. Du kan lage SVG-stier direkte i HTML-koden din eller ved å referere til en ekstern SVG-fil.

Eksempel: En enkel buet sti

La oss lage en enkel buet sti ved å bruke SVG-elementet path og attributtet d (path data):

            <svg width="200" height="200">
 <path id="myPath" d="M 10 10 C 40 10, 65 85, 95 95" fill="none" stroke="black"/>
</svg>
            

              
                Copy
              
            
          

I dette eksempelet:

• M 10 10: Flytter det nåværende punktet til (10, 10).
• C 40 10, 65 85, 95 95: Definerer en kubisk Bézier-kurve. Koordinatene representerer kontrollpunkter som former kurven. Elementet vil deretter bevege seg langs denne kurven.

For å bruke denne stien i din CSS, vil du referere til den ved hjelp av ID-en. Se på følgende CSS-regel:

            .animated-element {
 offset-path: path('url(#myPath)');
 offset-distance: 0%; /* Start ved begynnelsen av stien */
 animation: moveAlongPath 5s linear infinite;
}

@keyframes moveAlongPath {
  100% {
    offset-distance: 100%; /* Slutt ved enden av stien */
  }
}
            

              
                Copy
              
            
          

Denne CSS-regelen definerer en animasjon der .animated-element vil følge SVG-stien definert av #myPath.

2. Bruke grunnleggende former og geometri

Selv om SVG-stier gir mest fleksibilitet, kan du også definere stier ved hjelp av grunnleggende geometriske former med funksjonen path(). Dette er spesielt nyttig for enkle bevegelser som å bevege seg i en rett linje eller langs en sirkulær bane. Disse grunnleggende formene forenkler definisjoner når komplekse stier ikke er nødvendige.

Funksjonen path() aksepterer forskjellige formfunksjoner som circle(), ellipse(), rect(), polygon() og line(). La oss se på et enkelt eksempel:

Eksempel: En enkel sirkelsti

            .circle-element {
 offset-path: path('circle(50px at 50% 50%)');
 animation: rotateAround 5s linear infinite;
}

@keyframes rotateAround {
  100% {
    offset-distance: 100%;
  }
}
            

              
                Copy
              
            
          

Her er offset-path satt til en sirkel. circle(50px at 50% 50%) setter sirkelens radius til 50 piksler og plasserer sentrum i midten av elementet ved å spesifisere 50 % for både x- og y-koordinatene. Dette får elementet til å bevege seg langs en sirkulær bane.

3. Bruke ray()- og inset()-funksjonene

ray()-funksjonen er en del av path()-definisjonen. Den skaper en rett linje som stråler utover fra et gitt punkt. Du definerer startvinkelen, vinkeløkningen (hvor mye retningen endres over stiens lengde), og avstanden. Selv om ray()-funksjonen er allsidig, kan den være litt kompleks og egner seg for spesifikke behov.

inset()-funksjonen er en annen spesialisert formfunksjon for bruk med path()-verdien. Den definerer et innfelt rektangel. Verdiene som brukes kan være lengdeverdier eller prosenter, som spesifiserer avstanden fra elementets kanter for å skape den interne rektangelstien. Dette er nyttig for stier som krever en ramme eller kant, og gir en visuell effekt når den følger de indre eller ytre kantene.

Forstå koordinatsystemet

Koordinatsystemet som brukes til å definere stiene dine er avgjørende for nøyaktig posisjonering og animering av elementer. Det er to hovedkoordinatsystemer i spill: SVG-koordinatsystemet og elementets koordinatsystem. Å forstå hvordan disse systemene samhandler er nøkkelen.

1. SVG-koordinatsystem

Når du definerer stier ved hjelp av SVG, jobber du innenfor SVG-koordinatsystemet. Dette systemet defineres vanligvis av width- og height-attributtene til SVG-elementet. Origo (0, 0) er plassert i øvre venstre hjørne. X-aksen øker mot høyre, og y-aksen øker nedover.

Hensyn:

• Skalering og transformasjoner: SVG-elementer kan skaleres og transformeres ved hjelp av attributter som viewBox og transform. Vær oppmerksom på disse transformasjonene, da de vil påvirke hvordan stiene dine tolkes.
• Enheter: SVG bruker forskjellige enheter for koordinater. Den vanligste er piksler (px), men du kan også bruke prosenter (%) eller andre enheter.

2. Elementets koordinatsystem

Elementet du animerer har også sitt eget koordinatsystem. Dette systemet defineres av dets posisjon i forhold til sitt overordnede element. Origo (0, 0) er vanligvis i øvre venstre hjørne av selve elementet, eller i forhold til elementets transform-origin hvis det er satt.

Viktig merknad: Egenskapen offset-path bruker koordinatsystemet definert av det *overordnede* elementet hvis SVG-stien refereres via en url() og er posisjonert utenfor selve elementet. Hvis stien er definert inline (innenfor det samme elementet eller et barneelement), fungerer den innenfor elementets nåværende kontekst og koordinatsystem.

Praktiske eksempler og bruksområder

La oss utforske noen praktiske eksempler for å styrke forståelsen din.

1. Animere en logo langs en buet sti

Scenario: Du vil animere en firmalogo som følger en buet sti i en nettsides header.

Implementering:

1. Lag en SVG-sti: Tegn en jevn, buet sti med et SVG-redigeringsverktøy eller skriv stidataene manuelt. Dette kan være en "S"-form eller en annen kreativ sti.
2. Inkluder SVG-en: Legg til SVG-koden i HTML-en din, enten direkte eller ved å referere til en ekstern SVG-fil.
3. Bruk CSS: Bruk offset-path-egenskapen til å referere til SVG-stien din og animere logoen.

            <div class="logo-container">
 <img src="logo.svg" alt="Company Logo" class="animated-logo">
</div>

<svg style="position: absolute; left: 0; top: 0; width: 0; height: 0;">
 <path id="logoPath" d="M 10 10 C 50 10, 50 90, 90 90" stroke="none" fill="none" />
</svg>

.logo-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.animated-logo {
  position: absolute;
  offset-path: path('url(#logoPath)');
  offset-distance: 0%;
  animation: logoAnimation 5s linear infinite;
  width: 50px;
  height: 50px;
  top:0; /* Få toppen til å samsvare med logo-stiens origo */
  left: 0; /* Få venstresiden til å samsvare med logo-stiens origo */
}

@keyframes logoAnimation {
  100% {
    offset-distance: 100%;
  }
}
            

              
                Copy
              
            
          

2. Lage en sirkulær lasteanimasjon

Scenario: Du vil lage en sirkulær lasteanimasjon.

Implementering:

1. Bruk path()-funksjonen: Bruk path()-funksjonen med circle() for å definere den sirkulære stien.
2. Animer offset-distance: Animer offset-distance-egenskapen fra 0 % til 100 % for å få lasteindikatoren til å bevege seg rundt sirkelen.
3. Vurder offset-rotate: Du kan kombinere offset-distance med offset-rotate for mer avanserte effekter.

            <div class="loading-container">
 <div class="loading-indicator"></div>
</div>

.loading-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.loading-indicator {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #3498db;
  border-radius: 50%;
  offset-path: path('circle(40px at 50% 50%)');
  offset-distance: 0%;
  animation: rotateAround 2s linear infinite;
}

@keyframes rotateAround {
  100% {
    offset-distance: 100%;
  }
}
            

              
                Copy
              
            
          

3. Animere tekst langs en tilpasset sti

Scenario: Du vil at tekst skal følge en bestemt form eller sti.

Implementering:**

1. Definer en SVG-sti: Lag en SVG-sti som matcher den ønskede banen for teksten. Dette kan være en signatur, en form eller et hvilket som helst tilpasset design.
2. Pakk tekst inn i span-elementer: Pakk hver bokstav eller hvert ord inn i et span-element.
3. Bruk CSS: Bruk offset-path og offset-distance på hvert span-element og animer offset-distance med keyframes. Merk: denne metoden støttes kanskje ikke universelt; test i dine målnettlesere.

            <div class="text-container">
 <span class="letter">H</span>
 <span class="letter">e</span>
 <span class="letter">l</span>
 <span class="letter">l</span>
 <span class="letter">o</span>
</div>

<svg width="200" height="100" style="position: absolute; left: 0; top: 0;">
  <path id="textPath" d="M 10 80 C 50 10, 150 10, 190 80" stroke="none" fill="none" />
</svg>

.text-container {
  position: relative;
  width: 200px;
  height: 100px;
  font-size: 2em;
  font-family: sans-serif;
  display: flex; /* For å plassere tekstelementer side om side */
}

.letter {
  position: absolute;
  offset-path: path('url(#textPath)');
  offset-distance: 0%;
  animation: textAnimation 5s linear infinite;
}

.letter:nth-child(1) { animation-delay: 0s; }
.letter:nth-child(2) { animation-delay: 1s; }
.letter:nth-child(3) { animation-delay: 2s; }
.letter:nth-child(4) { animation-delay: 3s; }
.letter:nth-child(5) { animation-delay: 4s; }

@keyframes textAnimation {
  100% {
    offset-distance: 100%;
  }
}
            

              
                Copy
              
            
          

            .animated-element {
  offset-rotate: auto;
  /* Andre stiler */
}
            

              
                Copy
              
            
          

            .animated-element {
  offset-anchor: 0% 0%; /* Øvre venstre hjørne */
  /* Andre stiler */
}
            

              
                Copy
              
            
          

            @media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none; /* Deaktiver animasjoner */
    /* Eller bruk en enklere animasjon */
  }
}
            

              
                Copy